<template>
    <el-popover
    class="share-popover"
    placement="bottom"
    width="156"
    trigger="click"
    @show="createQrCode"
    >
        <div class="share-pop-content">
            <div 
            class="copy item"
            @click="shareHandler"
            >
                <i class="iconfont">&#xe620;</i>
                复制链接
            </div>

            <div class="wechat item">
                <div class="title">
                    <i class="iconfont">&#xe602;</i>
                    微信扫一扫
                </div>

                <el-image
                    fit="fill"
                    :src="qrcodeUrl"
                ></el-image>
            </div>
        </div>

        <slot name="reference" slot="reference"></slot>
    </el-popover>
</template>

<script>
import QRCode from 'qrcode';

export default {
    props: {
        share: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            qrcodeUrl: '',
        };
    },
    methods: {
        createShareUrl() {
            var url = `${window.location.origin}${this.share}`;

            if (!this.share) {
                url = window.location.href;
            }

            return url;
        },
        shareHandler() {
            var url = this.createShareUrl();

            this.$copyText(url).then(function (e) {
                showMsg('已复制分享链接至“剪贴板”', 'success');
            });
        },
        createQrCode() {
            var url = this.createShareUrl();

            QRCode.toDataURL(url, (err, src) => {
                src && (this.qrcodeUrl = src);
            });
        },
    },
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .share-pop-content{
        .item{
            cursor: default;

            & + .item{
                margin-top: 10px;
            }

            &.copy{
                cursor: pointer;

                &:hover{
                    color: $primaryColor;
                }
            }
        }
    }

    .wechat{
        .title {
            .iconfont {
                color: #16D46B;
            }
        }
    }
</style>